<style>
    .singleEle{

    }
</style>


<div id="big" style="height:500px;width: 100%;position: relative;">

    <button style="z-index: 2;position: absolute;" onclick="addEleNode()">＋</button>
    <button style="z-index: 2;position: absolute;right:50%;" onclick="editMapCoordinates()">保存布局</button>

    {volist name="nodes" id="n"}
    <div style="z-index:2;position: absolute;left:{$n.idx_left}px;top:{$n.idx_top}px;" class="singleEle"
         id="node_{$n.id}" onmousedown="small_down(event,this)"
        onclick="$('#del_node').css('left',(parseInt($(this).css('left')) - 10));
                       $('#del_node').css('top',(parseInt($(this).css('top'))));

                       $('#del_node').show();

                        delNodeId = $(this).attr('id');">
        <button  onclick="endLink(this)">→</button>

        <textarea class="contentEle" oninput="editMapRecord('{$n.id}',this)">{$n.contents}</textarea>

        <button   onclick="beginLink(this)">→</button>
    </div>
    {/volist}

    <!--删除节点-->
    <button onclick="delMapNode()" id="del_node" style="z-index:3;display:none;position: absolute;left:0;top:0;">删除</button>



    <svg id="blank_board" style="z-index:1;width:100%;height:100%;position: absolute;left:0px;top:0px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line id="tmpLine" x1="0" y1="0" x2="0" y2="0" class="singleLine"
          onclick="$('#del_link').css('left',(parseInt($(this).attr('x1')) + parseInt($(this).attr('x2')))/2);
                       $('#del_link').css('top',(parseInt($(this).attr('y1')) + parseInt($(this).attr('y2')))/2);

                       $('#del_link').show();

                        delLinkId = $(this).attr('id');"
          style="stroke:rgb(255,0,0);stroke-width:5" />

    {volist name="links" id="li"}
    <line id="line_{$li.src_id}_{$li.tar_id}" x1="0" y1="0" x2="0" y2="0"
          onclick="$('#del_link').css('left',(parseInt($(this).attr('x1')) + parseInt($(this).attr('x2')))/2);
                       $('#del_link').css('top',(parseInt($(this).attr('y1')) + parseInt($(this).attr('y2')))/2);

                       $('#del_link').show();

                        delLinkId = $(this).attr('id');"

          style="stroke:rgb(255,0,0);stroke-width:5" class="singleLine"/>

    {/volist}


</svg>

    <!--删除连线-->
    <button onclick="delMapLink()" id="del_link" style="z-index:3;display:none;position: absolute;left:0;top:0;">删除</button>
</div>

<script>
    //console.log( 0.5 * parseInt($('#ni').css('height')));


    var startEleId = "",delLinkId = "",delNodeId = "";

    function addEleNode() {
        $.ajax({
            type: "POST",
            url: "__PUBLIC__/index/index/addMapNode",
            data: {
                toolId: '{$toolId}'
            },
            success: function (result) {
                //console.log(result);
                //var newId = $('.singleEle').length + 1 ;
                var newId = result ;

                $('#big').append('<div style="z-index:2;position: absolute;left:0px;top:20px;" \
                onclick="$(\'#del_node\').css(\'left\',(parseInt($(this).css(\'left\')) - 10));\
                $(\'#del_node\').css(\'top\',(parseInt($(this).css(\'top\'))));\
                $(\'#del_node\').show();\
                delNodeId = $(this).attr(\'id\');"\
                    class="singleEle" id="node_' + newId + '" onmousedown="small_down(event,this)">\
            <button  onclick="endLink(this)">→</button>\
            <textarea class="contentEle" oninput="editMapRecord(' + newId + ',this)"></textarea>\
            <button   onclick="beginLink(this)">→</button>\
            </div>');
            }
        });


    }


    function beginLink(ele) {
        //$('#blank_board').append('<line id="tmpLine" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />');

        document.onmousemove = function (e) {


            srcEle = $(ele).parents('.singleEle');

            $('#tmpLine').attr('x1',parseInt(srcEle.css('left')) + parseInt(srcEle.css('width')));
            $('#tmpLine').attr('y1',parseInt(srcEle.css('top')) + 0.5 * parseInt(srcEle.css('height')));

            $('#tmpLine').attr('x2',e.pageX);
            $('#tmpLine').attr('y2',e.pageY - 72);//top的高度

            startEleId = $(ele).parents('.singleEle').attr('id');
        };

    }

    function endLink(ele){
        if(startEleId != "" && startEleId != $(ele).parents('.singleEle').attr('id')) {

            $.ajax({
                type: "POST",
                url: "__PUBLIC__/index/index/addMapLink",
                data: {
                    toolId: '{$toolId}',
                    srcId:startEleId.split('_')[1],
                    tarId:$(ele).parents('.singleEle').attr('id').split('_')[1]
                },
                success: function (result) {
                    var tmpId = "line_" + startEleId.split('_')[1] + "_" + $(ele).parents('.singleEle').attr('id').split('_')[1];

                    var newLink = $('#tmpLine').clone();


                    $('#tmpLine').attr('x1', 0);
                    $('#tmpLine').attr('y1', 0);

                    $('#tmpLine').attr('x2', 0);
                    $('#tmpLine').attr('y2', 0);

                    startEleId == "";

                    $('#blank_board').append(newLink);
                    $(newLink).attr('id', tmpId);
                }
            });
        }else {

            $('#tmpLine').attr('x1', 0);
            $('#tmpLine').attr('y1', 0);

            $('#tmpLine').attr('x2', 0);
            $('#tmpLine').attr('y2', 0);

            startEleId == "";

        }
        //$('#blank_board').append('<line id="' + tmpId + '" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2" />');
    }

    function moveLine( lineId ,srcEle ,tarEle ) {
        if(srcEle != "") {
            $('#' + lineId).attr('x1', parseInt($('#' + srcEle).css('left')) + parseInt($('#' + srcEle).css('width')));
            $('#' + lineId).attr('y1', parseInt($('#' + srcEle).css('top')) + 0.5 * parseInt($('#' + srcEle).css('height')));
        }

        if(tarEle != "") {
            $('#' + lineId).attr('x2', parseInt($('#' + tarEle).css('left')));
            $('#' + lineId).attr('y2', parseInt($('#' + tarEle).css('top')) + 0.5 * parseInt($('#' + tarEle).css('height')));
        }
    }


    var tmpLines = '{:json_encode($links)}';
    //console.log(tmpLines);
    JSON.parse(tmpLines).forEach(function (line) {
        moveLine("line_" + line.src_id + "_" +line.tar_id,"node_" + line.src_id,"node_" + line.tar_id);
    });


    //点击连线以外区域隐藏删除按钮
    $(document).click(function(e){
        var _con = $('.singleLine');   // 设置目标区域

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            $('#del_link').hide();
        }

        _con = $('.singleEle');   // 设置目标区域

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            $('#del_node').hide();
        }
    });



    function small_down(e,ele) {

        var obig = document.getElementById("big");
        var osmall = ele;

        var e = e || window.event;

        /*用于保存小的div拖拽前的坐标*/
        osmall.startX = e.clientX - osmall.offsetLeft;
        osmall.startY = e.clientY - osmall.offsetTop;

        /*鼠标的移动事件*/
        document.onmousemove = function (e) {

            var e = e || window.event;

            osmall.style.left = e.clientX - osmall.startX + "px";
            osmall.style.top = e.clientY - osmall.startY + "px";

            /*对于大的DIV四个边界的判断*/

            if (e.clientX - osmall.startX <= 0) {
                osmall.style.left = 0 + "px";
            }

            if (e.clientY - osmall.startY <= 0) {
                osmall.style.top = 0 + "px";
            }

            if (e.clientX - osmall.startX >= 1000) {
                osmall.style.left = 1000 + "px";
            }

            if (e.clientY - osmall.startY >= 500) {
                osmall.style.top = 500 + "px";
            }


            //连线随之移动
            var lines = $('#blank_board').children();

            for(var i=0; i < lines.length; i++){
                if($(lines[i]).attr('id').split('_').indexOf($(ele).attr('id').split('_')[1]) == 1){
                    moveLine($(lines[i]).attr('id'),$(ele).attr('id'),"");
                }else if($(lines[i]).attr('id').split('_').indexOf($(ele).attr('id').split('_')[1]) == 2){
                    moveLine($(lines[i]).attr('id'),"",$(ele).attr('id'));
                }
            }


            $('#del_node').hide();
        };

        /*鼠标的抬起事件,终止拖动*/
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };

    }


    function editMapRecord(recordId, ele) {
        $.ajax({
            type: "POST",
            url: "__PUBLIC__/index/index/editMapRecord",
            data: {
                recordId: recordId,
                contents:$(ele).val()
            },
            success: function (result) {

            }
        });
    }


    function editMapCoordinates() {
        var result = new Array();

        $('.singleEle').each(function (idx,node) {
            var nodeResult = new Object();
            nodeResult.id = $(node).attr('id').split('_')[1];
            nodeResult.left = parseInt($(node).css('left'));
            nodeResult.top = parseInt($(node).css('top'));

            result.push(nodeResult);
        });

        //console.log(result);

        $.ajax({
            type: "POST",
            url: "__PUBLIC__/index/index/editMapCoordinates",
            data: {
                resultArr: result,
            },
            success: function (result) {
                toastr.info('布局已成功保存~');
                setTimeout(function () {
                    toastr.clear();
                }, 4000);
            }
        });

    }

    function delMapLink() {
        //console.log(delLinkId);

        $.ajax({
            type: "POST",
            url: "__PUBLIC__/index/index/delMapLink",
            data: {
                srcId: delLinkId.split('_')[1],
                tarId:delLinkId.split('_')[2]
            },
            success: function (result) {

                $('#' + delLinkId).remove();
                delLinkId = "";
            }
        });
    }

    function delMapNode() {
        //console.log(delNodeId);
        var nodeId = delNodeId.split('_')[1];

        $.ajax({
            type: "POST",
            url: "__PUBLIC__/index/index/delMapNode",
            data: {
                nodeId: nodeId
            },
            success: function (result) {

                $('#' + delNodeId).remove();
                delNodeId = "";

                $('.singleLine').each(function (idx,line) {
                    var srcId = $(line).attr('id').split('_')[1];
                    var tarId = $(line).attr('id').split('_')[2];

                    if(nodeId == srcId || nodeId == tarId){
                        $(line).remove();
                    }
                });
            }
        });
    }
</script>

